@import "bourbon/bourbon";
#header{
	.title{
		.subtitle{
			display:none;
		}
	}
}

@import "images";

#right{
	float:right;
	width:400px;
	.thumbnail{
		width:100%;
		height:400px;
		@extend .image-viewable;
	}
	text-align:center;
	.name{
		font-weight:bold;
		font-size:20px;
	}
}

#price{
	.label{
		font-weight:bold;
	}
}
#expiration{
	font-style:italic;
	margin-bottom:20px;
}

#description{
	margin-left:20px;
}

#clearer{
	clear:both;
}

@import "stars";

#rating-form{
	.numerical-rating{
		float:right;
		width:150px;
		height:30px;
		background-repeat:repeat-x;
		background-size:contain;
		background-image:url('/images/star-back.svg');
		margin:0;
		padding:0;
		font-size:0;
		overflow:hidden;
		position:relative;
		@include transform(scaleX(-1));
		input{
			position:absolute;
			top:0px;
			display:block;
			width:100%;
			height:100%;
			@include appearance(none);
			border:none;
			margin:0;
			padding:0;
			background:none;
			border:none;
			outline:none;
			cursor:pointer;
		}
		input:hover,input:checked{
			background-repeat:repeat-x;
			background-size:contain;
			background-image:url('/images/star.svg');
		}
	}
	textarea{
		display:none;
	}
	.rich-text{
		width:50%;
		height:150px;
	}
	input[type=submit]{
		margin-right:50%;
		display:block;
		position:relative;
		margin-left:auto;
	}
}

#average-rating{
	float:right;
}
h2{
	.clearer{clear: both;}
}

.rating{
	width:100%;
	position:relative;
	margin-bottom:10px;
	.margin{
		width:36px;
		float:left;
		.user{
			margin:0;
			padding:0;
			display:block;
			text-decoration:none;
			.pic{
				@include user-select(none);
				background-size:contain;
				background-repeat:no-repeat;
				background-position:center center;
				width:36px;
				height:36px;
				outline:1px solid black;
			}
			.name{
				margin-top:5px;
				font-size:10px;
				width:100%;
				margin:0;
				padding:0;
				display:block;
				color:black;
				text-decoration:none;
			}
		}
	}
	.message{
		width:100%;
		margin-left:50px;
	}
	.clearer{
		clear:both;
	}
}